<template>
	<view class="centent">
		<view class="left">
			<block v-for v-for="(item,i) in leftList" :key='i'>
				<view @click="selectLeft(i,item)" :class="{active_left:i===num}">
					{{item}}
				</view>
			</block>
		</view>
		<view class="right">
			<text class="right-title">{{title}}</text>
			<view>
				<block v-for="(item,index) in menuList" :key='index'>
					<view class="content-view">
						<view class="left-img">
							<image :src="item.objdis.image" mode="aspectFill"></image>
						</view>
						<view class="content-title">
							<text class="title">{{item.objdis.input}}</text>
							<view class="content-middle">
								<block v-for="(it,i) in item.objdis.tags" :key='i'>
									<text>{{it}}</text>
								</block>
							</view>
							<view class="mouthNums">
								<text>月售0</text>
							</view>
							<view class="content-price">
								<view class="price">
									{{item.objdis.Discount}}
								</view>
								<view class="price-">
									{{item.objdis.Price}}
								</view>
								<view class="select-nums">
									<image src="../../../static/coen/jianhao.png" mode="widthFix"
										@click="decrease(item,index)"></image>
									<text>{{item.objdis.number}}</text>
									<image @click="add(item,index)" src="../../../static/coen/jiahao.png"
										mode="widthFix"></image>
								</view>
							</view>

						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="shopping">
			<!-- 骑手 -->
			<view class="rider">
				<image v-show="!flag" src="../../../static/coen/weigou.png" mode=""></image>
				<image v-show="flag" src="../../../static/coen/yigou.png" mode=""></image>
			</view>
			<!-- 数量 -->
			<view class="shopping_nums">
				{{selectNums}}
			</view>
			<!-- 	金额 -->
			<view class="shopping_money" v-if="shopList">
				<view class="shopping_dis">
					<view class="shopping_left">
						<view class="cost">
							<view class="total_price">￥{{sum}}</view>
							<view class="delivery">另需配送费{{shopList.physical}}</view>

						</view>

					</view>
					<view class="shopping_right" :class="{shopp_active:flag}">

						<text v-show="!flag">{{shopList.delivering}}元起</text>
						<view v-show="flag">
							<view v-show="!isEnough">还差{{needMoney}}元</view>
							<view v-show="isEnough" @click="goToPay">结算</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<Dialog ref='dialogRef' />
	</view>
</template>

<script>
	import {
		Login
	} from '@/login/login.js'
	import {
		mapState
	} from 'vuex'
	import Dialog from '../../../element/dialog.vue'
	export default {
		components: {
			Dialog
		},
		data() {
			return {
				flag: false,
				isEnough: false,
				leftList: [],
				selectNums:0,
				num: 0,
				title: '',
				menuList: [],
				sumList: [],
				sum: 0,
				needMoney: 0,
				loginData:{}

			}
		},
		computed: {
			...mapState(['getdishesList', 'shopList']),
			getList() {
				let leftArr = this.getdishesList.map(item => {
					return item.optidata
				})
				this.leftList = [...new Set(leftArr)]
				this.title = this.leftList[this.num]

			}


		},
		watch: {
			title(newValue, oldValue) {

				this.menuList = this.getdishesList.filter(item => {
					return item.optidata === this.title
				})
			}
		},
		// mounted() {
		// 	console.log('mounted')
		// 	this.isLogin()
		// },
		methods: {
			selectLeft(i, item) {
				this.num = i
				this.title = item
				// this.menuList = this.getdishesList.filter(item => {
				// 	return item.optidata === this.title
				// })
			},
			add(item, index) {
				let objdis = this.menuList[index].objdis
				objdis.number++
				objdis.count = objdis.number * objdis.Discount
				objdis.count = parseFloat(objdis.count.toFixed(1))
				// console.log('add', objdis.number,objdis.count,typeof(objdis.count))
				this.getSumList(this.menuList[index])

			},
			decrease(item, index) {
				let objdis = this.menuList[index].objdis
				objdis.number--
				if (objdis.number < 0) {
					objdis.number = 0
				}
				objdis.count = objdis.number * objdis.Discount
				objdis.count = parseFloat(objdis.count.toFixed(1))
				this.getSumList(this.menuList[index])
			},
			getSumList(item) {
				// item._id
				let index = this.sumList.findIndex((currentValue, index) => currentValue._id === item._id)
				if (index == -1) {
					if (item.objdis.number > 0) {
						this.sumList.push(item)
					}

				} else {
					if (item.objdis.number > 0) {
						this.sumList[index] = item
					} else {
						this.sumList.splice(index, 1)
					}

				}
				let sum = 0
				let number=0
				this.sumList.forEach(item => {
					sum += item.objdis.count
					sum = parseFloat(sum.toFixed(1))
					number += item.objdis.number
						// this.selectNums+=item.objdis.number
						
				})
				this.sum = sum
			this.selectNums=number
				console.log('sumList', this.sumList, sum)
				this.isActive()
			},
			isActive() {
				this.sumList.length > 0 ? this.flag = true : this.flag = false
				
				// delivering
				if (this.sum < this.shopList.delivering) {
					this.needMoney = parseFloat((this.shopList.delivering - this.sum).toFixed(1))
					this.isEnough = false
				} else {
					this.isEnough = true
				}

			},
			goToPay() {
				if (this.sum >= this.shopList.delivering) {
					let auth = uni.getStorageSync('login')
					if (auth) {
						console.log('已经登录',this.shopList,auth)
						// auth.sum= parseFloat((this.sum+this.shopList.physical).toFixed(1))
						// 做支付
						// 需要支付的总金额
						// 配送费
						// 用户openid
						// 商家标识：身份证
						// 商家名称
						// 商家logo
						// 点的商品个数
						let Ordering = {
							payment: parseFloat((this.sum+this.shopList.physical).toFixed(1)),
							physical:this.shopList.physical,
							openid:auth.openid,
							MerchantId:this.shopList.openid,
							nameshop:this.shopList.shop,
							logo:this.shopList.logo,
							allorder:this.sumList
						}
						let option=JSON.stringify(Ordering)
						uni.navigateTo({
							url:`/pages/pay/index?data=${option}`
						})
					} else {
						console.log('未登录')
						this.$refs.dialogRef.changFlag(true)
					}
				}

			},

			handleLogin() {
				uni.getUserProfile({
					desc: 'weixin',
					success: async(infoRes) => {
						// console.log( infoRes.userInfo);
						let loginClass = new Login(infoRes.userInfo)
						let openid =await loginClass.go()
							this.isLogin()
					}
				});

			},
			// 是否已登录
			
			isLogin() {
				let getdata = uni.getStorageSync('login')
				if (!getdata) {
					// this.wxlogin = false
					this.$refs.dialogRef.changFlag(true)
				} else {
					// this.wxlogin = true
					this.loginData = getdata
					this.$refs.dialogRef.changFlag(false)
				}
				
			}

		}
	}
</script>

<style scoped lang="scss">
	.centent {
		display: flex;
	}

	.left {
		width: 190upx;
		background: #fafafa;
		overflow-y: auto;
		height: 100%;

		view {
			color: #a8a8a8;
			font-size: 28upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
		}
	}

	.active_left {
		background: #FFFFFF !important;
		font-weight: bold !important;
	}

	.right {
		width: 100%;
		padding: 9upx 9upx 130upx 9upx;
		overflow: hidden;
		overflow-y: auto;

		.content-view {
			display: flex;
			justify-content: space-between;
			height: 200upx !important;
			overflow: hidden;
			margin: 30upx 0;
			color: #898989;

			.left-img {
				width: 180upx !important;
				height: 200upx !important;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10upx;
					overflow: hidden;
				}
			}

			.content-title {
				padding-left: 10upx;
				font-size: 24upx;

				.title {
					color: #333333;
					height: 50upx;
					font-size: 33upx;
					font-weight: bold;
					line-height: 50upx;
					overflow: hidden;
				}

				.content-price {
					display: flex;
					width: 100%;
					justify-content: space-around;
					align-items: center;

					.price- {
						text-decoration: line-through;
					}

					.price {
						color: #fb4e44;
						font-size: 33upx;
						width: 180upx;
						overflow: hidden;
					}

					.select-nums {
						display: flex;
						align-items: center;

						text {
							width: 50upx;
							text-align: center;
						}

						image {
							width: 60upx;
							height: 60upx;
						}
					}
				}
			}

			.content-middle {
				display: flex;

				text {
					background: #f1f1f1;
					margin-right: 9upx;
					padding: 4upx 13upx;
					border-radius: 7upx;
					display: block;
				}
			}

		}

		.right-title {
			font-size: 28upx;
			height: 60upx;
			line-height: 60upx;



		}
	}

	.shopping {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		// border-radius: 50upx;
		// overflow: hidden;
		// width: 100%;
		.shopp_active {
			background: #ffd300 !important;
			color: #000000 !important;
		}


		.rider {
			width: 120upx;
			height: 150upx;
			position: fixed;
			bottom: 0upx;
			left: 50upx;

			image {
				width: 120upx;
				height: 150upx !important;
			}
		}

		.shopping_nums {
			background: red;
			width: 40upx;
			height: 40upx;
			border-radius: 50%;
			font-size: 20upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 40upx;
			position: fixed;
			bottom: 50upx;
			left: 130upx;
		}

		.shopping_money {


			.shopping_dis {
				display: flex;
				margin: 0 20upx;
				height: 130upx;

				.shopping_left {
					height: 130upx;
					background: #000000;
					flex-grow: 2;
					border-top-left-radius: 50upx;
					border-bottom-left-radius: 50upx;

					.cost {
						padding-left: 170upx;
						color: #4CD964;
						height: 130upx;

						.total_price {
							font-size: 40upx;
							color: #FFFFFF;
							height: 65upx;
							line-height: 65upx;
						}

						.delivery {
							color: #999999;
							font-size: 28upx;
							height: 65upx;
						}
					}
				}

				.shopping_right {
					height: 130upx;
					line-height: 130upx;
					font-size: 30upx;
					color: #7f7f7f;
					text-align: center;
					background: #000000;
					flex-grow: 1;
					border-top-right-radius: 50upx;
					border-bottom-right-radius: 50upx;
				}
			}
		}
	}
</style>
